<script setup lang="ts">
import {ref, watch} from "@vue/runtime-core";
import {ESIPlayer, ESMediaSource, ESPlayerPlayMode} from "@extscreen/es3-player";
import {useES} from "@extscreen/es3-core";
import {ESAudioPlayer as EsAudioPlayer} from "@extscreen/es3-audio-player";

const props=defineProps({
  uri:{
    type:String
  }
})
const audioPlayer = ref<ESIPlayer>()
const es=useES()
watch(()=>audioPlayer.value,(newVal)=>{
  if(newVal){
    audioPlayer.value?.initialize()
  }
})
watch(()=>props.uri,(newVal)=>{
  if (newVal){
    playByUri(newVal)
  }
})
function playByUri(newUri:string){
  const uri=es.getESAppRuntimePath()+'/'+newUri
  console.log('uri:'+uri)
  const mediaSource: ESMediaSource = {
    uri: uri,
  }
  audioPlayer.value?.playMediaSource(mediaSource)
}
const onPlayerInitialized = (playerType:number) => {
  console.log('onPlayerInitialized:'+playerType)
  audioPlayer.value?.setPlayMode(ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_ONCE)
}
const onPlayerError=()=>{
  console.error('onBgmPlayerError')
}
</script>

<template>
  <es-audio-player
      ref='audioPlayer'
      class="ark-audio-player"
      @onPlayerInitialized='onPlayerInitialized'
      @onPlayerError="onPlayerError"
  />
</template>

<style scoped>
.ark-audio-player{
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
}
</style>
